

/**移动端底部选择器  强用UI
 * wwwen
 **/
let BottoMSelection={
    idtxt:'bottomPicker_',//数据唯一标识前缀
    index: 0, // 递增的index，数据唯一标识
    indexList: [], // 数据的集合
    selectkey:'select',//每个ui选择的index的key名
    selecinit:'-1000100100',//默认值
}

/**创建一个
 * @param ldata 数据集合[{id,list[{name,value,id}]},{},{},.....]
 * @param callback 回调函数
 * @param lh 每个li的高度
 * @param len 显示几条
 * @param cssD 样式
 * return 返回唯一标识
 */
BottoMSelection.create=function(ldata,callback,lh,len,cssD){
    this.index++;
    if(cssD==null){
        cssD={
            myPanel:'myPanel',//面板css
            shadowup:'shadowup',//上阴影
            shadowdown:'shadowdown',//下阴影
            ulDiv:'ulDiv',//ul的父级div css
            ulcls:'ulcls',//ul的css,
            licls:'licls',//li的css
            lidiv:'lidiv',//li里的div css
            licls_xz:'licls_xz',//选中
        }
    }
    if(lh==null)lh=50;
    if(len==null)len=7;
    let data={
        id:this.idtxt+this.index,//数据的唯一
        offset: {}, // 每个ul元素的滚动位置
        liHeight: lh, // 每个li的高度
        lilen: len,//显示几条
        dataList: ldata, // 每个数据的滚动列表
        element:'UL',
        panlHeight:len*lh,//面板的高度
        shadowHeight:(len-1)*lh/2,//阴影高度
        scopeId:'',//vue scopeId值
        fatherid:'',//父级容器ID
        callback:callback,//回调函数
        css:cssD,
    }
    this.indexList.push(data);
    return data.id;
}

BottoMSelection.__createoffset=function(data){
    data.offset={};
    for(let i=0;i<data.dataList.length;i++){
        data.dataList[i].id=data.id+'_'+i+'_'+data.fatherid;//滚动数据的唯一标识,也是每个UL的id
        let key=data.dataList[i].id;
        data.offset[key]={
            'start':{'y':0,'top':0},
            'move':{'y':0,'len':0,'state':false,'num':false},
            'end':{'state':false},
            'tempInter':null
        }
    }
}

/**
 * 册除
 * @param id
 */
BottoMSelection.deleteData=function(id){
    for(let i=0;i<this.indexList.length;i++){
        if(this.indexList[i].id==id){
            console.log('BottoMSelection.getData 册除',id);
            document.getElementById(this.indexList[i].fatherid).innerHTML='';
            this.indexList[i].callback=null;
            this.indexList.splice(i, 1);
            break;
        }
    }
}
/**
 * 重新设置数组
 * @param key 唯一标识
 * @param index 数据里数组的index
 * @param list //新数组
 */
BottoMSelection.setMouList=function(key,index,list){
    let data=this.getData(key);
    data.dataList[index].list=list;
    document.getElementById(data.dataList[index].id).innerHTML='';
    this.__setUiSelect(data.dataList[index].id,this.selecinit,key);
    let html='';
    for(let k=0;k<list.length;k++){
        html+='<li class="'+data.css.licls+'"'+data.scopeId+' index='+k+' value='+list[k].value+' style="height:'+data.liHeight+'px;line-height:'+data.liHeight+'px;">';
        html+='<div class="'+data.css.lidiv+'"'+data.scopeId+'>'+list[k].name+'</div>';
        html+='</li>';
    }
    document.getElementById(data.dataList[index].id).innerHTML=html;
    document.getElementById(data.dataList[index].id).style.transform='translate3d(0px, 0px, 0px)';
    this.__setUiSelect(data.dataList[index].id,0,key);
}
/**
 * 获取一个数据
 * @param id
 * @param type 0:返回数据,1返回true,false
 * @returns 返回数据    (true有数据,false无)
 */
BottoMSelection.getData=function(id,type){
    if(type==null)type=0;
    for(let i=0;i<this.indexList.length;i++){
        if(this.indexList[i].id==id){
            if(type===0){
                return this.indexList[i];
            }else{
                return true;
            }
        }
    }
    if(type===0){
        return null;
    }else{
        return false;
    }
}
/**
 * 是否已经生产 html true是
 * @param id
 * @returns {boolean}
 */
BottoMSelection.getIsInitHtml=function(id){
    let data=this.getData(id);
    if(data==null)return false;
    let dom=document.getElementById(data.fatherid);
    if(dom==null)return false;
    if(dom.innerHTML==''){
        return false;
    }else{
        return true;
    }
}
/**必须
 * 初始化每个数据dom
 * @param key 唯一标识
 * @param scopeId vue class唯一标识
 * @param fatherid 父级div id
 * @param cssD 样式
 * @param lh 每个li的高度
 * @param len 显示几条
 */
BottoMSelection.initUlelement=function(key,scopeId,fatherid,cssD,lh,len){
    console.log(scopeId,key,'');
    let data=this.getData(key);
    data.scopeId=scopeId;
    if(document.getElementById(data.fatherid)!=null){
       document.getElementById(data.fatherid).innerHTML='';
    }

    data.fatherid=fatherid;
    document.getElementById(data.fatherid).innerHTML='';
    if(cssD!=null){
        data.css=cssD;
    }
    if(lh!=null){
        data.liHeight=lh;
    }
    if(len!=null){
        data.lilen=len;
    }
    data.panlHeight=data.lilen*data.liHeight;
    data.shadowHeight=( data.lilen-1)*data.liHeight/2;//阴影高度

    this.__createoffset(data);

    let html='<div class="'+data.css.myPanel+'" '+data.scopeId+' style="touch-action: none;height: '+data.panlHeight+'px;">';
    html+='<div class="'+data.css.shadowup+'" '+data.scopeId+' style="height:'+data.shadowHeight+'px;"></div>';//上阴影
    html+='<div class="'+data.css.shadowdown+'" '+data.scopeId+' style="height:'+data.shadowHeight+'px;"></div>';//下阴影
    html+='<div class="'+data.css.ulDiv+'" '+data.scopeId+'>';
    for(let i=0;i<data.dataList.length;i++){
        let listdata=data.dataList[i];
        html+='<ul id='+listdata.id+' index='+i+' class="'+data.css.ulcls+'" '+data.scopeId+' style="transform: translate3d(0px, 0, 0px);padding-top:'+data.liHeight*(data.lilen-1)/2+'px">';
        for(let k=0;k<listdata.list.length;k++){
            html+='<li class="'+data.css.licls+'" '+data.scopeId+' index='+k+' value='+listdata.list[k].value+'  iid='+listdata.list[k].id+' style="height:'+data.liHeight+'px;line-height:'+data.liHeight+'px;">';
            html+='<div  class="'+data.css.lidiv+'" '+data.scopeId+'>'+listdata.list[k].name+'</div>';
            html+='</li>';
        }
        html+='</ul>';
    }
    html+='</div>';
    html+='</div>';
    document.getElementById(data.fatherid).innerHTML=html;

    for(let i=0;i<data.dataList.length;i++){
        this.__setUiSelect(data.dataList[i].id,this.selecinit,key);
        document.getElementById(data.dataList[i].id).addEventListener('touchstart',  (e)=> {
            let touch = e.targetTouches[0];
            this.__touchstart(touch,data,data.dataList[i].id,key);
            e.stopPropagation(); // 防止屏幕滑动
        },{ passive: false });
        document.getElementById(data.dataList[i].id).addEventListener('touchmove',  (e)=> {
            let touch = e.targetTouches[0];
            this.__touchmove(touch,data,data.dataList[i].id,key);
            e.stopPropagation();
            e.preventDefault();// 防止屏幕滑动
        },{ passive: false });
        document.getElementById(data.dataList[i].id).addEventListener('touchend',  (e)=> {
            let touch = e.targetTouches[0];
            this.__touchend(data,data.dataList[i].id,key);
            e.stopPropagation();// 防止屏幕滑动
        },{ passive: false });
    }
}
/**
 * 获取最终选择结果
 * @param key
 * @type 返回结果类型 null(value),1({id,value})
 */
BottoMSelection.getSelectRS=function(key,type){
    let data=this.getData(key);
    let list=[];
    for(let i=0;i<data.dataList.length;i++){
        let ul=document.getElementById(data.dataList[i].id);
        let index=ul.getAttribute(this.selectkey);
        if(index==this.selecinit){
            if(type==null){
                list.push(this.selecinit);
            }else{
                list.push({id:this.selecinit,value:this.selecinit});
            }
        }else{
            index=parseInt(index);
            if(index>=data.dataList[i].list.length){
                if(type==null){
                    list.push(this.selecinit);
                }else{
                    list.push({id:this.selecinit,value:this.selecinit});
                }
            }else{
                if(type==null){
                    list.push(data.dataList[i].list[index].value);
                }else{
                    list.push(data.dataList[i].list[index]);
                }

            }

        }
    }
    return list;
}
/**
 * 重新设置回调
 * @param key
 * @param call
 */
BottoMSelection.setCallback=function(key,call){
    let data=this.getData(key);
    data.callback=call;//回调函数
}
/**
 * 滑动-开始
 * @param touch
 * @param bottomPicker 数据
 * @param domulId
 */
BottoMSelection.__touchstart=function(touch,bottomPicker,domulId,datakey){
    //console.log('滑动-开始',bottomPicker);
    let ul=document.getElementById(domulId);
    let key=ul.getAttribute('id');
   // console.log(bottomPicker.offset[key]);

    if(bottomPicker.offset[key].tempInter){
        clearInterval(bottomPicker.offset[key].tempInter);
        bottomPicker.offset[key].tempInter = null;
        bottomPicker.offset[key].move.y = touch.clientY;
    }
    bottomPicker.offset[key].move.len = 0;
    bottomPicker.offset[key].end.state = true;
    bottomPicker.offset[key].start.y = touch.clientY;
    bottomPicker.offset[key].start.top = parseInt(ul.style.transform.split(",")[1].replace('px', '')) || 0;
}
/**
 * '滑动-中（手指移动时触发）'
 * @param touch
 * @param bottomPicker
 * @param domulId
 */
BottoMSelection.__touchmove=function(touch,bottomPicker,domulId,datakey){
    //console.log('滑动-中（手指移动时触发）');
    let ul=document.getElementById(domulId);
    let key=ul.getAttribute('id');
    bottomPicker.offset[key].move.y = touch.clientY;
    let y =  bottomPicker.offset[key].move.y -  bottomPicker.offset[key].start.y +  bottomPicker.offset[key].start.top;
    ul.style.transform='translate3d(0px, ' + y + 'px, 0px)';
    bottomPicker.offset[key].end.y = y;
}
/**
 * '滑动-结束（手指离开页面时触发）'
 * @param bottomPicker
 *  @param domulId
 */
BottoMSelection.__touchend=function(bottomPicker,domulId,datakey){
    //console.log('滑动-结束（手指离开页面时触发）');
    let _this=this;
    let ul=document.getElementById(domulId);
    let key=ul.getAttribute('id');
    bottomPicker.offset[key].move.state = true;
    var tempLen = 1;
    if(bottomPicker.offset[key].start.y > bottomPicker.offset[key].move.y){
        bottomPicker.offset[key].move.num = true;
        tempLen = bottomPicker.offset[key].start.y - bottomPicker.offset[key].move.y;
    }else{
        bottomPicker.offset[key].move.num = false;
        tempLen = bottomPicker.offset[key].move.y - bottomPicker.offset[key].start.y;
    }
    tempLen = tempLen / bottomPicker.liHeight;




    var tempNum = 1;
    bottomPicker.offset[key].tempInter = setInterval(function(){
        //console.log(tempNum,tempLen);
        tempNum ++;
        var tempTop = bottomPicker.offset[key].start.top;
        bottomPicker.offset[key].start.top = parseInt(ul.style.transform.split(",")[1].replace('px', '')) || 0;
        // console.log("touchend",tempLen);
        if(tempLen <= 3
            || tempTop >= 0
            || bottomPicker.offset[key].start.top >= 0
            || ((ul.children.length - 1) * bottomPicker.liHeight) <= Math.abs(tempTop)
            || ((ul.children.length - 1) * bottomPicker.liHeight) <= Math.abs(bottomPicker.offset[key].start.top)){
            tempNum = tempLen;
        }else{
            bottomPicker.offset[key].start.y = bottomPicker.offset[key].move.y;
            if(bottomPicker.offset[key].move.num){
                bottomPicker.offset[key].move.y = bottomPicker.offset[key].move.y - ((tempLen - tempNum) * bottomPicker.liHeight);
            }else{
                if(bottomPicker.offset[key].move.y < 0){
                    bottomPicker.offset[key].move.y = bottomPicker.offset[key].move.y - ((tempLen - tempNum) * bottomPicker.liHeight);
                }else{
                    bottomPicker.offset[key].move.y = bottomPicker.offset[key].move.y + ((tempLen - tempNum) * bottomPicker.liHeight);
                }
            }
            var y = bottomPicker.offset[key].move.y - bottomPicker.offset[key].start.y + bottomPicker.offset[key].start.top;
            ul.style.transform='translate3d(0px, ' + y + 'px, 0px)';
            bottomPicker.offset[key].end.y = y;
        }
        // 在这前面的都是实现延迟继续滚动效果,这下面的则是原来的效果
        if(tempNum >= tempLen){
            clearInterval(bottomPicker.offset[key].tempInter);
            bottomPicker.offset[key].end.state = false;
            var itemHeight = bottomPicker.liHeight;
            var sign = bottomPicker.offset[key].end.y >= 0 ? 1 : -1;

            // 计算超出回弹
            var fieldIndex = Math.round(Math.abs(bottomPicker.offset[key].end.y) / itemHeight);
            var len = sign * (fieldIndex * itemHeight);
            if (len > 0) {
                len = 0;
                fieldIndex = 0;
            } else if (len < -(ul.children.length - 1) * itemHeight) {
                len = -(ul.children.length - 1) * itemHeight;
                fieldIndex = ul.children.length - 1;
            }
            ul.style.transform='translate3d(0px, ' + len + 'px, 0px)';
            //数据列表(dataList) index
            let dataIndex=ul.getAttribute('index');
            _this.__setUiSelect(domulId,fieldIndex,datakey);
            //列表中的index
            let listIndex=ul.children[fieldIndex].getAttribute('index');

           // console.log('touchend ', ul.children[fieldIndex].getAttribute('index'));
            let fvo={'dataindex':dataIndex,'listIndex':listIndex}
            if(bottomPicker.callback!=null)bottomPicker.callback(fvo);


        }
    }, 100);
}
/**设置选中
 *
 * @param id ui 的 id
 * @param data=index
 */
BottoMSelection.__setUiSelect=function(id,data,key){
    let myElement= document.getElementById(id);
    let cssD=this.getData(key).css;
    myElement.setAttribute(this.selectkey,data);
    //console.log(myElement.classList);
    if(data!=this.selecinit){


    }
    let childNodes = myElement.childNodes;
    for(let i=0;i<childNodes.length;i++){
        if(childNodes[i].getAttribute('index')==data){
           // console.log(childNodes[i].classList);
            if(!childNodes[i].classList.contains(cssD.licls_xz)){
                childNodes[i].classList.add(cssD.licls_xz);
            }
        }else{
            if(childNodes[i].classList.contains(cssD.licls_xz)){
                childNodes[i].classList.remove(cssD.licls_xz);
            }
        }

    }

}
/**
 * 设置选择
 * @param index 数据列表 index
 * @param datekey 数据唯一标识
 * @param selecti 选择 index
 */
BottoMSelection.setdataIndex=function(index,selecti,datekey,callback){
    let data=this.getData(datekey);
    let id=data.dataList[index].id;
    let ul=document.getElementById(id);
    let len=data.liHeight*selecti*-1;
    this.__setUiSelect(data.dataList[index].id,selecti,datekey);
    ul.style.transform= 'translate3d(0px, ' + len + 'px, 0px)';

    let fvo={'dataindex':index,'listIndex':selecti}
    if(callback!=null)callback(fvo);
}

/**
 * 设置选择
 * @param index 数据列表 index
 * @param value 选择数据 value,id
 * @param datekey 数据唯一标识
 * @param type 0(value),1:id
 */
BottoMSelection.setdataValue=function(index,value,datekey,type,callback){
    //console.log('BottoMSelection.setdataValue==========',index,value,datekey);
    let data=this.getData(datekey);
    let id=data.dataList[index].id;
    let ul=document.getElementById(id);
   // console.log('BottoMSelection.setdataValue',id,ul);
    let chinds=ul.children;
    //console.log('BottoMSelection.setdataValue',id);
    let len=0;
    let selecti=-1;
    for(let i=0;i<chinds.length;i++){
        let divdata=(type===0?chinds[i].getAttribute('value'):chinds[i].getAttribute('iid'));
        if(value==divdata){
           // console.log(chinds[i].getAttribute('value'));
            len=data.liHeight*i*-1;
            selecti=i;
            break;
        }
    }
    this.__setUiSelect(data.dataList[index].id,selecti.toString(),datekey);
    ul.style.transform= 'translate3d(0px, ' + len + 'px, 0px)';
    let fvo={'dataindex':index,'listIndex':selecti};
    if(callback!=null)callback(fvo);

}




/**
 * 返回某年，到某年的日期数据
 * @param start
 * @param end
 * return [年,月,日,时,分]
 */
BottoMSelection.utilGetDate=function(start,end){
    let dataAry=[];
    let i=0;
    let yearVo={id:0,list:[]};
    for(i=start;i<=end;i++){
        yearVo.list.push({'name':i+'年','value':i,'id':i});
    }
    dataAry.push(yearVo);

    let monthvo={id:1,list:[]};
    for(i=1;i<=12;i++){
        monthvo.list.push({'name':i+'月','value':i,'id':i});
    }
    dataAry.push(monthvo);

    let rivo={id:2,list:[]};
    for(i=1;i<=30;i++){
        rivo.list.push({'name':i+'日','value':i,'id':i});
    }
    dataAry.push(rivo);

    let shiivo={id:3,list:[]}
    for(i=0;i<=23;i++){
        shiivo.list.push({'name':i+'时','value':i,'id':i});
    }
    dataAry.push(shiivo);

    let fenvo={id:4,list:[]}
    for(i=0;i<=59;i++){
        fenvo.list.push({'name':i+'分','value':i,'id':i});
    }
    dataAry.push(fenvo);
    return dataAry;
}

export default BottoMSelection;
